<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script type="text/javascript" src="layui/layui.all.js"></script>
</head>
<body>
<div class="content" style="margin-top: -14px;"></div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript">
    layui.config({
        version: '1531663423583' //为了更新 js 缓存，可忽略
    });

    var laypage = layui.laypage //分页
    var layer = layui.layer //弹层
    var table = layui.table //表格
    var element = layui.element; //元素操作
    var $ = layui.jquery;

    fun();
    function fun() {
        $(".content").append(" <table class=\"layui-hide\" id=\"test\" lay-filter=\"demo\"></table>");
        table.render({
            elem: '#test'
            , height: 640
            , url: '/ariticalmanage' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 120}
                , {field: 'tital', title: '标题', width: 120}
                , {field: 'artical', title: '文章', width: 120}
                , {field: 'status', title: '状态', width: 120}
                , {field: 'display', title: '发布', width: 120}
                , {field: 'dates', title: '发布日期', width: 120}
                , {field: 'remarkTimes', title: '点赞次数', width: 120, sort: true}
                , {field: 'discussTimes', title: '评论次数', width: 120, sort: true}
                , {fixed: 'right', width: 200, toolbar: '#barDemo'}
            ]]
        });
    }

    //监听工具条
    table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'detail') {
            $(".title").val(data.tital);
            $(".artical").val(data.artical);
            layer.open({
                btn: 0,
                area: ['300px', '500px'],//设置区域的大小
                title: data.tital,
                content: $(".elastic-force"),
            })
//            window.parent.location.reload();
            fun();
        } else if (layEvent === 'del') {
            layer.confirm('真的删除行么', function (index) {
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);
            });
            var id = data.id;
            $.ajax({
                url: "deleteartical",
                data: {"id": data.id},
                type: "POST",
                datatype: "json"
            }).done(function (data) {
                if (data == 1) {
                    window.parent.location.reload();
                    fun();
                }
            })
        } else if (layEvent === 'edit') {
            $(".title").val(data.tital);
            $(".artical").val(data.artical);
            layer.open({
                closeBtn: 0,
                btn: ['提交', '取消'],
                area: ['300px', '500px'],//设置区域的大小
                title: data.tital,
                content: $(".elastic-force"),
                btn1: function (index, layero) {
                    $.ajax({
                        url: "/alterartical.do",
                        data: {id: data.id, title: $(".title").val(), artical: $(".artical").val()},
                        type: "POST"
                    }).done(function (data) {
                        window.parent.location.reload();
                        fun();
                    })
                    layer.close(index);
                },

                btn2: function (index, layero) {
                    window.parent.location.reload();
                    fun();
                }
            })
        }
    });
    //分页
    laypage.render({
        elem: 'pageDemo' //分页容器的id
        , count: 10 //总页数
        , skin: '#1E9FFF' //自定义选中色值
        , skip: true //开启跳页
        , jump: function (obj, first) {
            if (!first) {
                layer.msg('第' + obj.curr + '页');
            }
        }
    });

</script>
</body>
<div class="elastic-force">
    <h3 style="margin-left: 100px">标题</h3>
    <input type="text" class="title" style="width: 160px;height: 30px;margin-left: 40px;margin-top: 4px"/><br/>
    <input type="text" class="artical" style="width: 230px;height: 200px;margin-left: 10px;margin-top: 6px;"/>
</div>
</html>